<template>
  <div height="100%">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <!-- <el-card> -->
    <el-row :gutter="20">
      <el-col :span="7">
        <!-- 搜索区域 -->
        <el-input placeholder="请输入内容" >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain @click="dialogVisible = true">添加用户</el-button>
      </el-col>
    </el-row>
    <!-- 用户注册 -->
    <el-dialog
      title="用户注册"
      :visible.sync="dialogVisible"
      width="50%"
      :center="true" >
      <!-- 注册内容主题区 -->
      <regist></regist>
    </el-dialog>
    <!-- 用户列表 -->
    <user-tabel></user-tabel>
    <div id = "jur" style="height: 1000px; width:100%;">
      <juris-diction></juris-diction>
    </div>

  </div>
</template>

<script>
  import regist from "./user-list/regist.vue"
  import jurisDiction from "./user-list/jurisdiction.vue"
  import userTabel from "./user-list/user-tabel.vue"
  export default {
    data(){
      return{
        dialogVisible:false
      }
    },
    components:{
        userTabel,
        jurisDiction,
        regist
    }
  }
</script>

<style scoped>
  #jur{
    margin-top: 100px;
  }
     /deep/ .el-dialog.body{
        width: 500px!important;
        margin-top: 20vh!important;
        background: linear-gradient(to right, rgb(201, 214, 255), rgb(226, 226, 226))!important;
      }
</style>
